<div class="p-3 relative">
    <ul class="nav nav-tabs nav-tabs-triangle" role="tablist">
      <li class="nav-item">
        <a data-toggle="tab" href="#f" role="tab" class="nav-link active">
          <i class="fa fa-folder-o"> </i> Starting
        </a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#s" role="tab" class="nav-link ">
          <i class="fa fa-bell-o"> </i> Next
        </a>
      </li>
      <li class="nav-item">
        <a data-toggle="tab" href="#t" role="tab" class="nav-link ">
          <i class="fa fa-check"> </i> Finish
        </a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="f" role="tabpanel">
        <div class="p-3 bg-white bb-l animated fadeIn bl-l br-l">
          <div class='row '>
            <div class="col-sm-5">
              <div class="p-3">
                <div><i class="fa fa-fire fa-3x"></i></div>
                <h3 class="mb-3">Hello, this is the first step</h3>
                <div>
                  Lorem ipsum dolor sit <span class="font-weight-bold">amet</span>, consectetur adipiscing elit, sed do eiusmod
                  <span class="font-weight-bold">tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim
                  veniam at non proident, sunt in culpa qui
                </div>
                <div class="font-xs text-muted mt-2">
                  *adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
                  quaerat voluptatem. Ut enim ad
                </div>
              </div>
            </div>
            <div class="col-sm-7 ">
              <form role="form">
                <div class="form-group-alt-attached">
                  <div class="row">
                    <div class="col-sm-6 col-sm-6">
                      <div class="form-group form-group-alt">
                        <label>First name</label>
                        <input type="text" class="form-control" placeholder="John" data-ng-model="$parent.form.fname">
                        <span></span>
                      </div>
                    </div>
                    <div class="col-sm-6 col-sm-6">
                      <div class="form-group form-group-alt">
                        <label>Last name</label>
                        <input type="text" class="form-control" placeholder="Doe" data-ng-model="$parent.form.lname">
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group form-group-alt">
                        <label>Address</label>
                        <input type="text" class="form-control" placeholder="350 Fifth Avenue, 34th floor"
                               data-ng-model="$parent.form.address">
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-4 col-sm-4">
                      <div class="form-group form-group-alt">
                        <label>Angular</label>
                        <input type="number" class="form-control" placeholder="1-5" data-ng-model="$parent.form.ang">
                        <span></span>
                      </div>
                    </div>
                    <div class="col-sm-4 col-sm-4">
                      <div class="form-group form-group-alt">
                        <label>NodeJS</label>
                        <input type="number" class="form-control" placeholder="1-5" data-ng-model="$parent.form.node">
                        <span></span>
                      </div>
                    </div>
                    <div class="col-sm-4 col-sm-4">
                      <div class="form-group form-group-alt">
                        <label>Backbone</label>
                        <input type="number" class="form-control" placeholder="1-5" data-ng-model="$parent.form.bbone">
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group form-group-alt">
                        <label>Comment</label>
                        <textarea class="form-control" placeholder="your comment here" style="height:70px;"
                                  data-ng-model="$parent.form.comment"></textarea>
                        <span></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="checkbox px-2 mt-2">
                  <label class="ui-checkbox">
                    <input type="checkbox" data-ng-model="$parent.form.agree">
                    <i></i>
                    I agree terms
                  </label>
                  <button type="button" data-toggle="tab" href="#s"
                          class="btn btn-sm btn-outline-primary rounded float-right"
                          data-ng-click="$parent.wizardTabs = 2">Next <i class="fa fa-long-arrow-right"></i></button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="s" role="tabpanel">
        <div class="p-3 bg-white bb-l animated fadeIn bl-l br-l">
          <div class='row '>
            <div class="col-sm-5">
              <div class="p-3">
                <div><i class="fa fa-key fa-3x"></i></div>
                <h3 class="mb-3">Second</h3>
                <div>
                  consectetur adipiscing elit, sed do eiusmod <span class="font-weight-bold">amet</span>, <span
                    class="font-weight-bold">tempor</span> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
                  at non proident, sunt in culpa qui
                </div>
                <div class="font-xs text-muted mt-2">
                  *adipisci velit, sed quia non numquam eius modi magnam aliquam quaerat voluptatem. Ut enim ad tempora
                  incidunt ut labore et dolore
                </div>
              </div>
            </div>
            <div class="col-sm-7 ">
              <form role="form">
                <div class="form-group-alt-attached">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group form-group-alt">
                        <label>Position</label>
                        <select class="form-control" data-ng-model="$parent.form.position">
                          <option> - choose -</option>
                          <option>Frontend developer</option>
                          <option>Backend developer developer</option>
                          <option>Fullstack programmer</option>
                        </select>
                        <span></span>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6">
                      <div class="form-group form-group-alt">
                        <label>Javascript skills</label>
                        <ul class="list-unstyled bg-no">
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.node">
                              <i></i>
                              NodeJS
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.bb">
                              <i></i>
                              BackboneJS
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.jquery">
                              <i></i>
                              Jquery
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.ember">
                              <i></i>
                              EmberJS
                            </label>
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div class="col-sm-6">
                      <div class="form-group form-group-alt">
                        <label>OS skills</label>
                        <ul class="list-unstyled bg-no">
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.win">
                              <i></i>
                              Windows
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.osx">
                              <i></i>
                              OSX
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.linux">
                              <i></i>
                              Linux
                            </label>
                          </li>
                          <li class="ml-0">
                            <label class="ui-checkbox m-0">
                              <input type="checkbox" data-ng-model="$parent.form.skill.other">
                              <i></i>
                              Other
                            </label>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>


                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group form-group-alt">
                        <label>Which do you prefer</label>
                        <div>
                          <label class="ui-radio">
                            <input type="radio" data-ng-model="$parent.form.skill.prefer" value="1">
                            <i></i>
                            Webstorm
                          </label>
                          <label class="ui-radio">
                            <input type="radio" data-ng-model="$parent.form.skill.prefer" value="2">
                            <i></i>
                            NetBeans
                          </label>
                          <label class="ui-radio">
                            <input type="radio" data-ng-model="$parent.form.skill.prefer" value="3">
                            <i></i>
                            Notepad
                          </label>
                          <label class="ui-radio">
                            <input type="radio" data-ng-model="$parent.form.skill.prefer" value="4">
                            <i></i>
                            Other
                          </label>
                        </div>

                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="form-group form-group-alt">
                        <label>Other skills</label>
                        <textarea class="form-control" placeholder="..." style="height:70px;"
                                  data-ng-model="$parent.form.skill.otherskills"></textarea>
                        <span></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="checkbox px-2 mt-2">
                  <button type="button" data-toggle="tab" href="#t"
                          class="btn btn-sm btn-outline-primary rounded float-right "
                          data-ng-click="$parent.wizardTabs = 3">Next <i class="fa fa-long-arrow-right"></i></button>
                  <button type="button" data-toggle="tab" href="#f"
                          class="btn btn-sm btn-outline-secondary rounded float-right mr-5"
                          data-ng-click="$parent.wizardTabs = 1"><i class="fa fa-long-arrow-left"></i> Previous
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-pane" id="t" role="tabpanel">
        <div class="p-2 bg-white bb-l clearfix animated fadeIn bl-l br-l">
          <h3 class="text-center">THANK YOU!</h3>
          <div class="text-center"><i class="fa fa-smile-o fa-3x"></i></div>
          <div class="text-center py-3 mb-3">
            <button type="button" class="btn btn-outline-primary rounded btn-lg" wz-next>Finish</button>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <h4>Lorem ipsum dolor</h4>
              <div class="mb-2">
                <i class="fa fa-question float-left fa-3x"></i>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet,
              </div>
              <div class="font-xs text-muted">
                totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
                sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet,
              </div>
            </div>
            <div class="col-sm-4">
              <h4>Nemo enim ipsam</h4>
              <div class="mb-2">
                <i class="fa fa-ambulance float-left fa-3x"></i>
                Sed ut perspiciatis unde omnis iste natus errorem aperiam, eaque ipsa quae ab illo inventore veritatis
                et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
                aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
                nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
              </div>
              <div class="font-xs text-muted">
                totam rem aperiam, eaque ipsa quae ab illo i explicabo. Nemo enim ipsam volup fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
                dolorem ipsum quia dolor sit amet,
              </div>
            </div>
            <div class="col-sm-4">
              <h4>Illo inventore veritatis et quasi</h4>
              <div class="mb-2">
                <i class="fa fa-anchor float-left fa-3x"></i>
                Sed ut perspiciatis unde omnis iste natlaudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
              </div>
              <div class="font-xs text-muted">
                totam rem aperiam, eaque ipsa quae ab illo inventunt explicabo fugit, sed quia consequuntur magni
                dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
                dolor sit amet,
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div class="row">
    <div class="col-md-3 p-3 br-l">
      <div class="big">Form Wizard</div>
      <ul class="list-group wizard">
        <li class="active ">
          <div class="item-content">
            <div class="wizard-step">
              <div class="wizard-step-number">1</div>
              <div class="wizard-step-text">Step 1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="wizard-step">
              <div class="wizard-step-number">2</div>
              <div class="wizard-step-text">Step 2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="wizard-step">
              <div class="wizard-step-number">3</div>
              <div class="wizard-step-text">Step 3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="wizard-step">
              <div class="wizard-step-number">4</div>
              <div class="wizard-step-text">Step 4</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-md-9 py-3">
      <div class="form-step">
        <div class="big">Step 1 - Main data</div>
        <form id="step1" name="wizard.step1" role="form" data-parsley-validate class="parsley-form">
          <div class="bb-l bt-l bg-white p-3 form-validation">
            <div class="row row-gap-10">
              <div class="col-sm-6">
                <div class="form-group">
                  <label>Name *</label>
                  <input type="text" class="form-control" required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label>Email *</label>
                  <input type="email" class="form-control" required>
                </div>
              </div>
            </div>
            <div class="row row-gap-10 mb-2">
              <div class="col-sm-4">
                <div class="form-group">
                  <label>Company *</label>
                  <input type="text" class="form-control" required>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="form-group">
                  <label>Tax number</label>
                  <input type="number" class="form-control">
                </div>
              </div>
              <div class="col-sm-4">
                <div class="form-group">
                  <label>Address</label>
                  <input type="text" class="form-control">
                </div>
              </div>
            </div>
            <div class="form-group">
              <label>Motivation</label>
              <input type="text" class="form-control">
            </div>

          </div>
          <div class="clearfix p-2 px-3">
            <button type="submit" class="btn btn-sm btn-primary rounded">next <i class="fa fa-long-arrow-right"></i>
            </button>
          </div>
        </form>
      </div>
      <div class="form-step hidden-xs-up">
        <div class="big">Step 2 - Age</div>
        <form id="step2" name="wizard.step2" role="form" data-parsley-validate class="parsley-form">
          <div class="bb-l bt-l bg-white p-3 form-validation">

            <div class="form-group">
              <label>Age</label>
              <input type="number" class="form-control" required>
            </div>

          </div>
          <div class="clearfix p-2 px-3">
            <button type="button" class="btn btn-sm btn-secondary rounded" onclick="formValidationAlt.prevStep()"><i
                class="fa fa-long-arrow-left"></i> prev
            </button>
            <button type="submit" class="btn btn-sm btn-primary rounded">next <i class="fa fa-long-arrow-right"></i>
            </button>
          </div>
        </form>
      </div>
      <div class="form-step hidden-xs-up">
        <div class="big">Step 3 - Message</div>
        <form id="step3" name="wizard.step3" role="form" data-parsley-validate class="parsley-form">
          <div class="bb-l bt-l bg-white p-3 form-validation">
            <div class="form-group">
              <label>Message</label>
              <textarea type="text" class="form-control" required></textarea>
            </div>
          </div>
          <div class="clearfix p-2 px-3">
            <button type="button" class="btn btn-sm btn-secondary rounded" onclick="formValidationAlt.prevStep()"><i
                class="fa fa-long-arrow-left"></i> prev
            </button>
            <button type="submit" class="btn btn-sm btn-primary rounded">next <i class="fa fa-long-arrow-right"></i>
            </button>
          </div>
        </form>
      </div>
      <div class="form-step hidden-xs-up">
        <div class="big">Step 4 - Finish</div>
        <div class="bb-l bt-l bg-white p-3 form-validation">
          <form name="wizard.step4" role="form">
            <div class="form-group">
              <label>Congraduations! You got the last step.</label>
            </div>
            <div class="form-group">
              <label>Just push the Finish button!</label>
            </div>
          </form>
        </div>
        <div class="clearfix p-2 px-3">
          <button type="button" class="btn btn-sm btn-secondary rounded" onclick="formValidationAlt.prevStep()"><i
              class="fa fa-long-arrow-left"></i> prev
          </button>
          <button type="button" class="btn btn-sm btn-success rounded">Finish <i class="fa fa-long-arrow-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="scripts/forms/wizard-alt.js"></script>